<template>
     <!-- 操作按钮区 -->
    <div class="action-buttons">
      <el-button type="primary" @click="batchSaveDetails">添加</el-button>
      <el-button @click="handleDataArchive">数据暂存</el-button>
    </div>
    
    <div>
        <!-- 查询条件部分 -->
       <div class="search-section">
            <el-form :inline="true" :model="prolist">
                <el-form-item label="废料编号">
                    <el-input v-model="prolist.DocumentSubject" placeholder="输入清单主题"></el-input>
                </el-form-item>
                <el-form-item label="废料主题">
                    <el-input v-model="prolist.DocumentNumber" placeholder="输入清单编号"></el-input>
                </el-form-item>
                <el-form-item label="废料日期">
                    <el-date-picker v-model="prolist.WasteDate" type="date" placeholder="选择日期"></el-date-picker>-
                    <el-date-picker v-model="prolist.WasteDate" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="添加人">
                    <el-input v-model="prolist.DocumentMaker" placeholder="输入添加人员"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="ShowMaterials">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="page-title">
        <h2>生产废料列表</h2>
        </div>
        <!-- 生产计划列表（仅展示序号列相关结构） -->
        <div class="table-container">
         
            <el-table :data="planList" stripe ref="tableRef">
                <!-- <el-table-column>
                    <template #header>
                        <el-checkbox v-model="allChecked" @change="handleCheckAllChange"></el-checkbox>
                    </template>
                    <template #default="scope">
                        <el-checkbox v-model="checkedIds" :label="scope.row.productionPlanningId"></el-checkbox>
                    </template>
                </el-table-column> -->
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="productionWasteZID" label="主键"></el-table-column>
                <el-table-column prop="documentSubject" label="生产废料编号"></el-table-column>
                <el-table-column prop="documentNumber" label="生产废料主题"></el-table-column>
                <el-table-column prop="documentMaker" label="制单人员"></el-table-column>
                <el-table-column prop="wasteDate" label="废料日期">
                     <template #default="scope">
                    {{ formatDate(scope.row.wasteDate) }}
                    </template>
                </el-table-column>
                <el-table-column prop="remarks" label="废料数量"></el-table-column>
                <el-table-column  prop="needStorage" label="入库状态"  >
                <template #default="scope">
                    <span :class="{ 'green-text': scope.row.needStorage, 'red-text':!scope.row.needStorage }">
                            {{ scope.row.needStorage ? '未申请入库' : '无需入库' }}
                        </span>
                </template>
                </el-table-column>
                <el-table-column > 
                    <template #default="scope">
                        <el-button type="text" @click="GetBYIdProductionPlanning(scope.row.productionWasteZID)">关联详情</el-button>
                    </template>
                </el-table-column>
                <!-- 操作列：根据入库状态显示“申请入库”按钮 -->
                <el-table-column label="操作">
                <template #default="scope">
                    <!-- 仅当 needStorage 为 true（未申请入库）时显示“申请入库”按钮 -->
                    <el-button 
                    v-if="scope.row.needStorage" 
                    type="text" 
                    @click="applyForStorage(scope.row.productionWasteZID)"
                    >
                    申请入库
                    </el-button>

                    <!-- 可添加其他操作（如编辑、删除），根据需求决定是否条件显示 -->
                </template>
                </el-table-column>
            </el-table>
           <!-- 分页部分 -->

<!--         
             <el-button @click="batchDelete">批量删除</el-button> -->
        </div>
         <div style="margin-top: 20px">
            <el-pagination
                v-model:current-page="page.pageindex"
                v-model:page-size="page.pageSize"
                :page-sizes="[5, 20, 25, 30]"
                :background="true"
                prev-text="上一页"
                next-text="下一页"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total.totalCount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { read, write } from '@/axios/axiosHelper';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Materialread, Materialwrite } from '@/axios/axiosHelper';
import router from '@/router';
import axios from 'axios';
// 定义搜索表单数据
const prolist = ref({
    DocumentSubject: '',
    DocumentNumber: '',
    WasteDate: '',
    DocumentMaker: '',
});

// 定义分页总数
const total = ref({
  totalCount: 0,
  pageCount: 0,
});
// 定义分页对象
const page = ref({
    pageindex: 1,
    pageSize: 15,
});

// 模拟生产计划列表数据
const planList = ref([
    {
        "productionWasteZID": '',
        "documentSubject": "",
        "documentNumber": "",
        "wasteDate": "",
        "needStorage": true,
        "documentMaker": "",
        "remarks": "",
        "isDel": false
    }
]);

const formatDate = (dateStr) => {
  const date = new Date(dateStr);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hour = String(date.getHours()).padStart(2, '0');
  const minute = String(date.getMinutes()).padStart(2, '0');
  const second = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};

// 表格引用
const tableRef = ref(null);

// 全选状态
const allChecked = ref(false);

// 选中的 ID 列表
const checkedIds = ref([]);

const ShowMaterials = () => {
    Materialread.get("/l-read/api/ProductionWasteZ/GetProductionWasteZ", {
        params: {
            pageindex: page.value.pageindex,
            pageSize: page.value.pageSize,
            DocumentSubject: prolist.value.DocumentSubject,
            DocumentNumber: prolist.value.DocumentNumber,
            WasteDate: prolist.value.WasteDate,
            DocumentMaker: prolist.value.DocumentMaker,
        }
    }).then((res) => {
        planList.value = res.data.data.result;
        console.log("显示数据", res.data.data);

        total.value.totalCount = res.data.data.totalCount;
        total.value.pageCount = res.data.data.pageCount;
        // 重置全选状态和选中的 ID 列表
        allChecked.value = false;
        checkedIds.value = [];
        console.log(res.data.data);
    }).catch((error) => {
        console.error('接口请求失败:', error);
        ElMessage.error('数据获取失败，请稍后重试');
    });
};

// 编辑跳转修改

const GetBYIdProductionPlanning = (productionWasteZID) => {
    router.push({
        path: 'Updatescraps',
        query: {
            productionWasteZID: productionWasteZID
        }
    });
    console.log(productionWasteZID);
};

// 跳转添加
const batchSaveDetails = () => {
    router.push({
        name: 'Addscraps',
    });
};
// 跳转申请入库
const applyForStorage1 = (productionWasteZID) => {
    router.push({
        path: 'Updatescraps',
        query: {
            productionWasteZID: productionWasteZID
        }
    });
    console.log(productionWasteZID);
};




const applyForStorage = (productionWasteZID)=>{
     router.push({
        path: 'AddStockInApplication',
        query: {
            productionWasteZID: productionWasteZID
        }
    });
    console.log(productionWasteZID);
}

// 删除单条记录
const DeleteProductionPlanning = async (productionWasteZID) => {
    try {
        const confirmResult = await ElMessageBox.confirm(
            '确认删除该条记录？',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }
        );
        if (confirmResult === 'confirm') {
            const response = await axios.delete(
                `https://localhost:44374/api/ProductionWasteZ/DelProductionWasteZ`,
                {
                    params: { productionWasteZID: productionWasteZID.toString() }
                }
            );
            if (response.data.code === 300) {
                ElMessage.success('删除成功');
                ShowMaterials(); // 调用 ShowMaterials 方法刷新数据
            } else {
                ElMessage.error(`删除失败：${response.data.message}`);
            }
        }
    } catch (error) {
        if (error !== 'cancel') {
            console.error('删除错误:', error);
            ElMessage.error('删除失败，请检查网络或联系管理员');
        }
    }
};

// 处理全选
const handleCheckAllChange = (value) => {
    if (value) {
        checkedIds.value = planList.value.map(item => item.productionWasteZID);
    } else {
        checkedIds.value = [];
    }
    allChecked.value = value;
};

// 批量删除
const batchDelete = async () => {
    if (checkedIds.value.length === 0) {
        ElMessage.warning('请选择要删除的记录');
        return;
    }
    try {
        const confirmResult = await ElMessageBox.confirm(
            '确认删除选中的记录？',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }
        );
        if (confirmResult === 'confirm') {
            const ids = checkedIds.value.join(',');
            const response = await axios.delete(
                `https://localhost:44374/api/ProductionWasteZ/DelProductionWasteZ`,
                {
                    params: { productionWasteZID: ids }
                }
            );
            if (response.data.code === 300) {
                ElMessage.success('批量删除成功');
                ShowMaterials(); // 调用 ShowMaterials 方法刷新数据
            } else {
                ElMessage.error(`批量删除失败：${response.data.message}`);
            }
        }
    } catch (error) {
        if (error !== 'cancel') {
            console.error('批量删除错误:', error);
            ElMessage.error('批量删除失败，请检查网络或联系管理员');
        }
    }
};

const handleSizeChange = (val) => {
    page.value.pageSize = val; // 修正属性名大小写
    ShowMaterials();
};

const handleCurrentChange = (val) => {
    page.value.pageindex = val; // 修正属性名大小写
    ShowMaterials();
};

onMounted(() => {
    ShowMaterials();
});
</script>

<style scoped>
.search-section {
    margin-bottom: 20px;
}

.table-container {
    max-height: 400px; /* 固定表格最大高度 */
    overflow-y: auto; /* 超出高度显示滚动条 */
    margin-bottom: 20px; /* 为分页预留空间 */
}

.el-table {
    width: 100%; /* 表格宽度占满容器 */
}

.green-text {
    color: green;
}

.red-text {
    color: red;
}
</style>    